<template>
  
  <view id="main_view">
    <!-- <MainHeadTool style="height: 15px" /> -->
    <view class="mainCenter">
      <component :is="name" :key="ckey"></component>
    </view>
    <!-- <button @click="updateKey">test {{ckey}}</button> -->
    <MainEndTool style="height: 50px" />
  </view>
</template>
<script>
import MainTest from "@/components/test/MainTest.vue";
// import MainHeadTool from "@/components/tools/MainHeadTool.vue";
import MainEndTool from "@/components/tools/MainEndTool.vue";
export default {
  components: {
    MainTest,
    // MainHeadTool,
    MainEndTool,
  },
  props: ["name"],
  data() {
    return {
      ckey: 1000
    }
  },
  methods:{
    updateKey() {
      this.ckey= this.ckey + 1 
    }
  }
};
</script>
<style>
#main_view {
  width: 100%;
  height: 100%;
  background: #f6f6f6;
  display: flex;
  flex-direction: column;
}
#main_view > .mainCenter {
  flex: 1;
  margin: 15px;
  box-sizing: border-box;
  border-radius: 7px;
}
</style>